import React, { Component } from "react"
import { Modal, Form, Input, message } from 'antd'
import { openModal, removeContainer } from "components/method/openModal"
import { messages } from "share/common"
import IeFileUpload from "components/template/ie-file-upload/ie-file-upload"
import FileUpload from "components/file-upload"
import Condition from "components/condition"

const { If, Else } = Condition;

@Form.create()
class ReceiptUpload extends Component {

  state = {
    confirmLoading: false,
    attachmentOID: [],
    repayAttachmentImages: []
  };

  handleOk = () => {
    const { onOk } = this.props;
    this.props.form.validateFieldsAndScroll((error, value) => {
      if (!error) {
        const { attachmentOID } = this.state;
        if (attachmentOID.length === 0) {
          message.error(messages('finance-4.key423')/*请上传附件*/);
          return
        }
        onOk({
          attachmentOID: attachmentOID[0],
          receiptNo: value.receiptNo
        }, this)
      }
    })
  };

  getUploadImageOId = values => {
    let attachmentOID = [];
    values.map(item => {
      attachmentOID.push(item.attachmentOID)
    });
    if ((values || []).length && !this.props.form.getFieldValue('receiptNo')) {
      let temp = values[0].name.split('.');
      temp.splice(-1, 1);
      this.props.form.setFieldsValue({
        receiptNo: temp.join('.')
      });
    }
    this.setState({ attachmentOID, repayAttachmentImages: values })
  };

  render() {
    const { visible, onCancel, afterClose } = this.props;
    const { confirmLoading, repayAttachmentImages } = this.state;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {span: 6, offset: 1},
      wrapperCol: {span: 14, offset: 1},
    };
    return (
      <Modal
        title={messages('finance-4.key418')/*回单上传*/}
        visible={visible}
        onCancel={onCancel}
        onOk={this.handleOk}
        afterClose={afterClose}
        confirmLoading={confirmLoading}
      >
        <Form className={'new-form'}>
          <Form.Item
            {...formItemLayout}
            label={messages('finance-4.key33')/*回单编号*/}
          >
            {getFieldDecorator('receiptNo')(
              <Input placeholder={messages('common.please.input')/*请输入*/}/>
            )}
          </Form.Item>
          <Form.Item
            {...formItemLayout}
            label={messages('finance-4.key419')/*回单附件*/}
            extra={messages('finance-4.key424')/*附件仅支持图片及PDF格式文件*/}
            required
          >
            {getFieldDecorator('attachmentOID')(
              <Condition>
                <If value={window.ISIE9}>
                  <IeFileUpload
                    defaultFileList={repayAttachmentImages}
                    attachmentType="PAYMENT"
                    fileSize={10}
                    maxNum={1}
                    isShowDefault
                    uploadUrl={`/api/upload/static/attachment`}
                    onChange={this.getUploadImageOId}
                  />
                </If>
                <Else>
                  <FileUpload
                    defaultFileList={repayAttachmentImages}
                    attachmentType="PAYMENT"
                    onChange={this.getUploadImageOId}
                    isShowDefault
                    maxNum={1}
                    fileSize={10}
                    uploadUrl={`/api/upload/static/attachment`}
                    showInExpenseDetail
                  />
                </Else>
              </Condition>
            )}
          </Form.Item>
        </Form>
      </Modal>
    )
  }

}

ReceiptUpload.open = function(env, callback, record) {
  let container;
  return new Promise(() => {
    const targetProps = {
      visible: true,
      onOk: (data, context) => close(data, context),
      onCancel: () => close(null),
      afterClose: () => {
        removeContainer(container);
        container = null;
      }
    };
    function close(data, context) {
      let closeModal = () => openModal(ReceiptUpload, {
        ...targetProps,
        visible: false
      }, env, container);
      if(data !== null) {
        callback({data, closeModal, context}, record);
      }
      else closeModal();
    }
    container = openModal(ReceiptUpload, targetProps, env);
  })
};

export default ReceiptUpload
